<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <style>
        .avatar-show {
            height: 32px;
            width: 32px;
        }
        .layui-card {
            border: 1px solid #f2f2f2;
            border-radius: 5px;
        }
        #deptTree {
            overflow: auto;
            height: -webkit-calc(100vh - 237px);
            height: -moz-calc(100vh - 237px);
            height: calc(100vh - 237px);
        }
        .layui-tree-entry .layui-tree-txt {
            padding: 0 5px;
            border: 1px transparent solid;
            text-decoration: none !important;
        }
        .layui-tree-entry.ew-tree-click .layui-tree-txt {
            color: #FFFFFF;
            background-color: #257BE0;
            border: 1px #257BE0 solid;
        }
        .layui-tree-entry.ew-tree-click .layui-tree-txt:hover {
            color: #FFFFFF;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-row layui-col-space10">
            <div class="layui-col-md2">
                <div class="layui-card">
                    <div class="layui-card-header" id="service-authority-tree" style="cursor: pointer">
                        部门树
                    </div>
                    <div class="layui-card-body">
                        <div id="deptTree"></div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md10">
                <div class="layui-card">
                    <div class="layui-card-body">

                        <fieldset class="table-search-fieldset">
                            <legend>搜索信息(<b>收起-展开</b>)</legend>
                            <div id="search-div" style="margin: 10px 10px 10px 10px">
                                <form class="layui-form" action="" lay-filter="search-form">
                                    <input type="hidden" id="deptId" name="deptId" class="layui-input"><!--用来存储部门ID的变化-->
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">账号：</label>
                                            <div class="layui-input-inline">
                                                <input type="text" id="account" name="account" autocomplete="off" class="layui-input"
                                                       placeholder="请输入用户ID">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">用户名：</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="name" id="name" autocomplete="off" class="layui-input" placeholder="请输入用户名">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">账户状态：</label>
                                            <div class="layui-input-inline">
                                                <select name="status" id="status" lay-filter="status">
                                                    <option value="">所有</option>
                                                    <option th:each="item:${baseDictList}" th:text="${item.name}"
                                                            th:value="${item.code}"></option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="layui-inline">
                                            <button type="submit" class="layui-btn" lay-submit lay-filter="data-search-btn">
                                                <i class="layui-icon"></i> 搜 索
                                            </button>
                                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-reset-btn">
                                                <i class="layui-icon layui-icon-refresh"></i> 重 置
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </fieldset>
                        <!--点击上传excel模板的input-->
                        <input id="excelFile" type="file" style="display: none"
                               accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
                        <!--主table表格-->
                        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

                    </div>
                </div>
            </div>
        </div>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button th:if="${#sets.contains(permissionSet, 'system:user:add')}" class="layui-btn layui-btn-sm" lay-event="add">
                    <i class="layui-icon layui-icon-addition" style="font-size: 10px;"></i>添加
                </button>
                <button th:if="${#sets.contains(permissionSet, 'system:user:delete')}" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
                    <i class="layui-icon layui-icon-delete" style="font-size: 10px;"></i>删除
                </button>
                <button th:if="${#sets.contains(permissionSet, 'system:user:downloadPdf')}" class="layui-btn layui-btn-sm" lay-event="downloadPdf">
                    <i class="layui-icon layui-icon-export" style="font-size: 10px;"></i>导出pdf
                </button>
                <button th:if="${#sets.contains(permissionSet, 'system:user:exportExcel')}" class="layui-btn layui-btn-sm" lay-event="exportExcel">
                    <i class="layui-icon layui-icon-export" style="font-size: 10px;"></i>导出excel
                </button>
                <button th:if="${#sets.contains(permissionSet, 'system:user:exportExcel')}" class="layui-btn layui-btn-sm" lay-event="downloadTemplate">
                    <i class="layui-icon layui-icon-export" style="font-size: 10px;"></i>下载excel模板
                </button>
                <button th:if="${#sets.contains(permissionSet, 'system:user:exportExcel')}" class="layui-btn layui-btn-sm" lay-event="excelUpload">
                    <i class="layui-icon layui-icon-export" style="font-size: 10px;"></i>根据excel导入
                </button>
            </div>
        </script>

        <script type="text/html" id="currentTableBar">
            <a th:if="${#sets.contains(permissionSet, 'system:user:edit')}" class="layui-btn layui-btn-xs" lay-event="edit">
                <i class="layui-icon layui-icon-edit" style="font-size: 10px;"></i>编辑
            </a>
            <a th:if="${#sets.contains(permissionSet, 'system:user:authorize')}" class="layui-btn layui-btn-xs layui-btn-warm" lay-event="authorize">
                <i class="layui-icon layui-icon-set" style="font-size: 10px;"></i>角色
            </a>
            <a th:if="${#sets.contains(permissionSet, 'system:user:editpassword')}" class="layui-btn layui-btn-xs layui-btn-warm" lay-event="editpassword">
                <i class="layui-icon layui-icon-key" style="font-size: 10px;"></i>修改密码
            </a>
            <a th:if="${#sets.contains(permissionSet, 'system:user:delete')}" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">
                <i class="layui-icon layui-icon-delete" style="font-size: 10px;"></i>删除
            </a>
        </script>

        <script type="text/html" id="statusTpl">
            {{#  if(d.status == '0'){ }}
            <span class="layui-badge layui-bg-blue">正常</span>
            {{#  } else { }}
            <span class="layui-badge layui-bg-orange">锁定</span>
            {{#  } }}
        </script>

    </div>
</div>
<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/lib/md5/md5.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/coco-message/coco-message.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" charset="utf-8"></script>

<script type="text/javascript" th:inline="javascript">
    AjaxUtil.ctx = /*[[@{/}]]*/'';
    layui.use(['form', 'table', 'tree'], function () {
        var form = layui.form,
            table = layui.table,
            tree = layui.tree;

        // 初始化部门树
        var indexDept = layer.load(0, {shade: 0.1});
        AjaxUtil.get({
            url: AjaxUtil.ctx + 'userinfo/listDeptForSelect',
            success: function (res) {
                layer.close(indexDept);

                var datalist = [];
                for (let item of res.data) {
                    item.title = item.deptName;
                    item.id = item.deptId;
                    item.field = 'deptId';
                    datalist.push(item);
                }
                // 扁平数据转树
                var treeData = arrayToTree(datalist, "0");
                tree.render({
                    elem: '#deptTree',
                    onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
                    data: treeData,
                    click: function (obj) {
                        $("input[name='deptId']").val(obj.data.id);
                        // 改变颜色
                        $('#deptTree').find('.ew-tree-click').removeClass('ew-tree-click');
                        $(obj.elem).children('.layui-tree-entry').addClass('ew-tree-click');
                        currTable.reload({
                            page: {
                                curr: 1
                            },
                            where: form.val("search-form")
                        });
                    }
                });
            },
            error: function (error) {
                layer.close(indexDept);
                Message.error('获取部门信息失败！', 1000);
            }
        });


        // 初始化人员列表表格
        var currTable = table.render({
            elem: '#currentTableId',
            url: AjaxUtil.ctx + 'userinfo/list',
            method: 'post', //如果无需自定义HTTP类型，可不加该参数
            where: {sortName:'user_id', sortOrder:'asc'}, // 初始化时带的参数
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [
                [
                    {type: "checkbox", width: '5%', fixed: 'left'},
                    {
                        field: '', width: '5%', title: '序号', type: 'numbers', templet: function (d) {
                            return d.LAY_TABLE_INDEX + 1;
                        }
                    },
                    {field: 'account', width: '10%', title: '账户', sort: true},
                    {field: 'name', width: '10%', title: '用户名', sort: true},
                    {
                        field: 'avatar', title: '头像', width: '6%', templet: function (d) {
                            if (!!d.avatar) {
                                return '<img src="' + d.avatar + '" class="avatar-show" lay-event="avatar"> ';
                            } else {
                                return '';
                            }
                        }
                    },
                    {field: 'deptName', width: '10%', title: '所属部门', minWidth: 80},
                    {field: 'phone', width: '10%', title: '电话', minWidth: 80},
                    {field: 'email', width: '10%', title: '邮箱', minWidth: 80},
                    {field: 'status', width: '8%', title: '状态', templet: '#statusTpl', sort: true},
                    {field: 'createTime', width: '12%', title: '创建时间', sort: true},
                    {field: 'updateTime', width: '12%', title: '更新时间', sort: true},
                    {title: '操作', width: '200px', toolbar: '#currentTableBar', align: "center", fixed: 'right'}
                ]
            ],
            autoSort: false, //禁用前端自动排序。注意：该参数为 layui 2.4.4 新增
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'line', // 行边框风格
            parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.rows //解析数据列表
                };
            },
            done: function(res, curr, count) { // done为数据渲染完的回调
                // 测试打印出后端返回的权限列表
                let permissionSet = [[${permissionSet}]];
                console.log(JSON.stringify(permissionSet));
            }
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            // 执行搜索重载
            currTable.reload({
                page: {
                    curr: 1 // 页码从1开始
                },
                where: form.val("search-form")
            });
            return false;
        });

        // 监听重置操作
        form.on('submit(data-reset-btn)', function (data) {
            form.val("search-form", {
                "name": '',
                "account": '',
                "status": ''
            });
            // 执行搜索重载
            currTable.reload({
                page: {
                    curr: 1
                },
                where: form.val("search-form")
            });
            return false;
        });

        // 监听排序事件
        table.on('sort(currentTableFilter)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            currTable.reload({
                initSort: obj, //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    sortName: toLine(obj.field), //排序字段
                    sortOrder: toLine(obj.type) //排序方式
                }
            });
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '添加用户',
                    type: 2,
                    shade: 0.3,
                    maxmin: true,
                    area: [layerwidth + 'px', layerheight + 'px'],
                    content: AjaxUtil.ctx + 'userinfo/add',
                    end: function (index) {
                        // 重载表格
                        currTable.reload();
                    }
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    ,data = checkStatus.data;
                if (data == null || data.length === 0) {
                    Message.warning("请选择用户！", 1000);
                    return;
                }
                layer.confirm('确定批量删除用户吗？', function (index) {
                    layer.close(index);
                    AjaxUtil.post({
                        url: AjaxUtil.ctx + "userinfo/batchDelete",
                        contentType: "application/json",
                        data: JSON.stringify(data),
                        success: function (res) {
                            if (res.code === 0) {
                                Message.success(1500, res.message, function () {
                                    // 重载表格
                                    currTable.reload();
                                });
                            } else {
                                Message.error(res.message, 1000);
                            }
                        },
                        error: function (error) {
                        }
                    });
                });

                // layer.alert(JSON.stringify(data));
            } else if (obj.event === 'downloadPdf') {
                console.log("点击下载pdf");
                // 下面的href模式也是可以的，也是没问题的，
                // let a = document.createElement('a');
                // a.href = AjaxUtil.ctx + 'sysuser/downloadPdf';
                // a.click()

                // 改为ajax下载文件，这样方便设置header，适配前后端分离的情况（$.ajax不支持blob类型，所以这里用原生的XMLHttpRequest）
                var url = AjaxUtil.ctx + 'userinfo/downloadPdf';
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);    // 也可以使用POST方式，根据接口
                xhr.responseType = "blob";    // 返回类型blob
                // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
                xhr.onload = function () {
                    // 请求完成
                    if (this.status === 200) {
                        // 返回200
                        var blob = this.response;

                        console.log(xhr.getResponseHeader("content-disposition"))
                        let temp = xhr.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1];
                        temp = temp.replace('"', ''); // 去除两边的引号

                        var fileName = decodeURIComponent(temp);
                        if (isEmpty(fileName)) {
                            fileName = '人员明细信息表.pdf';
                        }

                        var reader = new FileReader();
                        reader.readAsDataURL(blob);    // 转换为base64，可以直接放入a表情href
                        reader.onload = function (e) {
                            // 转换完成，创建一个a标签用于下载
                            var a = document.createElement('a');
                            a.download = fileName + '.pdf';
                            a.href = e.target.result;
                            $("body").append(a);    // 修复firefox中无法触发click
                            a.click();
                            $(a).remove();
                        }
                    }
                };
                // 发送ajax请求
                xhr.send()
            } else if (obj.event === 'exportExcel') {
                console.log("点击导出excel");
                let a = document.createElement('a');
                a.href = AjaxUtil.ctx + 'userinfo/exportExcel';
                a.click();
                a.parentNode.removeChild(a);
            } else if (obj.event === 'downloadTemplate') {
                console.log("点击下载excel模板");
                let a = document.createElement('a');
                a.href = AjaxUtil.ctx + 'userinfo/downloadTemplate';
                a.click();
                a.parentNode.removeChild(a);
            } else if (obj.event === 'excelUpload') {
                console.log("点击上传excel模板");
                $("#excelFile").trigger("click");
            }
        });

        // 监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        // 监听行工具事件
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            console.log(data);
            if (obj.event === 'edit') {

                var index = layer.open({
                    title: '编辑用户',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    area: [layerwidth + 'px', layerheight + 'px'],
                    content: AjaxUtil.ctx + 'userinfo/update/' + data.userId,
                    end: function (index) {
                        // 重载表格
                        currTable.reload();
                    }
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除该用户吗？', function (index) {
                    layer.close(index);
                    AjaxUtil.get({
                        url: AjaxUtil.ctx + "userinfo/delete/" + data.userId,
                        success: function (res) {
                            if (res.code === 0) {
                                Message.success(1500, res.message, function () {
                                    // 重载表格
                                    currTable.reload();
                                });
                            } else {
                                Message.error(res.message, 1000);
                            }
                        },
                        error: function (error) {
                        }
                    });
                });
                return false;
            } else if (obj.event === 'authorize') {
                var index = layer.open({
                    title: '用户授权',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    area: [layerwidth + 'px', layerheight + 'px'],
                    content: AjaxUtil.ctx + 'userinfo/authorize/' + data.userId,
                    end: function (index) {
                        // 重载表格
                        currTable.reload();
                    }
                });
                return false;
            } else if (obj.event === 'editpassword') {
                layer.prompt({
                    formType: 0,
                    value: '123456',
                    title: '请输入密码'
                }, function(value, prompt, elem) {
                    if (isEmpty(value)) {
                        layer.msg('请输入新密码！', {icon: 5});
                        return;
                    }
                    var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}');
                    if(!pwdRegex.test(value)){
                        layer.msg("新密码复杂度过低（密码中必须包含字母、数字、特殊字符）！", {icon: 5});
                        return;
                    }

                    var index = layer.load(0, {shade: 0.1});
                    value = md5.MD5('' + value);
                    AjaxUtil.get({
                        url: AjaxUtil.ctx + 'userinfo/updatePassword/' + data.userId + "/" + value,
                        success: function (res) {
                            if (0 === res.code) {
                                layer.closeAll('dialog');
                                layer.close(index);
                                Message.success(res.message, 1000);
                            } else {
                                Message.warning(res.message, 1000);
                            }
                        },
                        error: function (error) {
                            layer.close(index);
                            Message.error(res.message, 1000);
                        }
                    });
                    layer.close(prompt);
                });
                return false;
            } else if (obj.event === 'avatar') {
                // 头像放大展示
                var url = data.avatar;
                if (url) {
                    var r = '';
                    r += '<div style="width: 100%; height: 100%; position: relative;">';
                    r += '<img src="' + url + '" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-height: 100%; max-width: 100%; margin: auto;">';
                    r += '</div>';
                    layer.open({
                        type: 1,
                        title: '图片预览',
                        area: ['400px', '600px'],
                        content: r,
                        shadeClose: true
                    });
                }
            }
        });

        // 选完excel模板后的操作
        $('#excelFile').change(function () {
            var formData = new FormData();
            formData.append("files", $("#excelFile")[0].files[0]);
            formData.append("fileName", $("#excelFile")[0].files[0].name); // 文件名字
            var index = layer.load(0, {shade: 0.1}); //0代表加载的风格，支持0-2

            AjaxUtil.upload({
                url: AjaxUtil.ctx + 'userinfo/excelUpload',
                data: formData,
                success: function (res) {
                    layer.close(index);
                    if (0 === res.code) {
                        Message.success(res.message, 1000);
                    } else {
                        Message.error(res.message, 1000);
                    }
                },
                error: function (error) {
                    layer.close(index);
                    Message.error("服务器异常！", 1000);
                }
            });
        });

    });


    /**
     *  扁平数据转树结构
     * @returns {[]}
     * @param data
     * @param firstPid
     */
    function arrayToTree(data, firstPid) {
        const result = [];
        getChildren(data, result, firstPid)
        return result;
    }

    function getChildren(data, result, parentId) {
        for (const item of data) {
            if (item.parentId === parentId) {
                const newItem = {...item, children: []};
                result.push(newItem);
                getChildren(data, newItem.children, item.deptId);
            }
        }
    }
</script>

</body>
</html>